<template>
  <div id="app">
    <el-container>
      <!--导航-->
      <el-header id="header">
        <div id="menuBottom">
          <el-row>
            <el-col :span="6">
              <div id="blogTag"><h1 style="color: rgb(0,181,173); font-weight: 800 !important; font-size: 30px">Blog</h1></div>
            </el-col>
            <el-col :span="10">
              <div id="menuDiv">
                <!--导航菜单-->
                <el-menu :default-active="$route.path" class="el-menu-demo"
                         mode="horizontal" @select="handleSelect" background-color='#333333'
                         active-text-color="#CDCD00" text-color="#aaaaaa"
                >
                  <el-menu-item index="/index" class="el-icon-s-home">首页</el-menu-item>
                  <el-menu-item index="/types" class="el-icon-s-opportunity">分类</el-menu-item>
                  <el-menu-item index="/tags" class="el-icon-s-flag">标签</el-menu-item>
                  <el-menu-item index="/archives" class="el-icon-document-copy">归档</el-menu-item>
                  <el-menu-item index="/aboutMe" class="el-icon-info">关于我</el-menu-item>
                </el-menu>
              </div>
            </el-col>
            <el-col :span="8">
              <div id="inputDiv">
                <el-input v-model="input" placeholder="Search...." class="el-link" clearable @keyup.enter.native="search()">
                  <el-button
                    slot="append"
                    @click="handleSearchEvent"
                    icon="el-icon-search"
                    style="background-color: #333333"/>
                </el-input>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-header>

      <!--中间容器-->
      <el-main>
        <router-view v-wechat-title="$route.meta.title"/>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>

      </el-main>

      <!--底部footer-->
      <el-footer>
        <el-container style="background-color: #1B1C1D">

          <div id="footerRow" style="width: 1180px">
            <div>
              <el-row>
                <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                  <div style="float: left; width: 180px;">
                    <h4 class="m-text-thin m-text-spaced" style="color: #ffffff; text-align: center; margin-top: 0px;">
                      联系我</h4>
                    <div style="margin-top: -6px">
                      <p class="m-text-thin m-text-spaced m-opacity-mini" style="text-align: center; color: #bbbbbb">
                        Email：luosj@bff.com</p>
                      <p class="m-text-thin m-text-spaced m-opacity-mini"
                         style="text-align: center; color: #bbbbbb; margin-top: -13px">QQ：2542331408</p>
                    </div>
                  </div>
                  <div>
                    <el-divider id="thirdDivider" direction="vertical"></el-divider>
                  </div>
                </el-col>

                <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                  <div style="margin-left: 36px">
                    <img src="../src/assets/img/wechat.jpg" alt="公众号二维码" style="width: 120px">
                    <el-divider id="fistDivider" direction="vertical"></el-divider>
                  </div>
                </el-col>

                <el-col :xs="5" :sm="5" :md="5" :lg="5" :xl="5">
                  <div>
                    <div style="float: left; width: 180px;">
                      <h4 class="m-text-thin m-text-spaced"
                          style="color: #ffffff; text-align: center; margin-top: 0px;">最新博客</h4>
                      <ul style="list-style-type: none; margin-top: -10px;">
                        <li class="myLi m-text-thin"
                            v-for="(recommendBlog, index) in recommendBlogs.slice(0, 4)" :key="recommendBlogs.id">
                          <el-link type="info" :underline="false" @click="toBlogInfo(recommendBlog.id)">{{ recommendBlog.title }}</el-link>
                        </li>
                      </ul>
                    </div>
                    <div>
                      <el-divider id="secondDivider" direction="vertical"></el-divider>
                    </div>
                  </div>
                </el-col>


                <el-col :xs="9" :sm="9" :md="9" :lg="9" :xl="9">
                  <h4 class="m-text-thin m-text-spaced" style="color: #ffffff; text-align: center; margin-top: 0px;">
                    Blog</h4>
                  <p class="m-text-thin m-text-spaced m-opacity-mini"
                     style="text-align: center; color: #bbbbbb; margin-top: -6px">
                    这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助...</p>
                </el-col>
              </el-row>
            </div>

            <div>
              <el-divider style="background-color: #bbbbbb"></el-divider>
            </div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny"
               style="text-align: center; color: #bbbbbb; margin-top: 30px">Copyright © 2021 - 2022 Luosj Designed by
              Luosj</p>

          </div>

        </el-container>
      </el-footer>

    </el-container>
  </div>
</template>

<script>
import "@/assets/css/me.css";
import "@/assets/css/animate.css";
import "@/assets/css/typo.css";
import "@/assets/lib/prism/prism.css";
import "@/assets/lib/prism/prism.js";

export default {
  name: 'App',
  data() {
    return {
      activeIndex: this.$route.path,
      input: '',
      recommendBlogs: [],
    };
  },
  methods: {
    // 获取所有发布且推荐的博客，并根据时间降序排列
    findPublishedAndRecommendBlogs(){
      this.$http.get("http://localhost:8088/show/blogs/pAndRList").then(res => {
        this.recommendBlogs = res.data.data;
      });
    },
    // 跳转至博客详情页面
    toBlogInfo(id){
      let routeData = this.$router.resolve({ // 路由跳转并传参
        name:'blog',
        query:{
          id:id //博客id
        },
      });
      window.open(routeData.href, '_blank');
    },
    //路由跳转
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.$router.push(key);
    },
    //搜索框回车事件
    search(){
      let routeData = this.$router.resolve({ // 路由跳转并传参
        name:'search',
        query:{
          word:this.input // 关键字
        },
      });
      window.open(routeData.href, '_blank');
    },
    //搜索图标点击事件
    handleSearchEvent(){
      let routeData = this.$router.resolve({ // 路由跳转并传参
        name:'search',
        query:{
          word:this.input // 关键字
        },
      });
      window.open(routeData.href, '_blank');
    }
  },
  created() {
    this.findPublishedAndRecommendBlogs() // 获取所有发布且推荐的博客，并根据时间降序排列
  }
}
</script>

<style>
#app {

}

/*input输入框背景色*/
.el-input__inner {
  background-color: #333333;
  border: #333333;
  color: #ffffff;
}

.el-divider--vertical {
  display: inline-block;
  width: 1px;
  height: 120px;
  background-color: #555555;
  vertical-align: top;
  position: relative;
}

.el-divider--horizontal {
  margin: 8px 0;
  margin-top: 30px;
  background: 0 0;
  border-top: 1px solid #555555;
}

/*修改了1  3 即导航栏字体大小和间距*/
.el-menu-item {
  font-size: 16px;
  color: #303133;
  padding: 0 22px;
  cursor: pointer;
  -webkit-transition: border-color .3s,background-color .3s,color .3s;
  transition: border-color .3s,background-color .3s,color .3s;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/* 顶部图片——图片等比例占满外层容器 */
.blog_first_picture{
  width: 100%;
  height: 350px;
}
.blog_first_picture img{
  width: 100%;
  height: 100%;
  object-fit:cover;
  z-index: -1;
}

</style>
